<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/dashboard.css">
		<link rel="stylesheet" type="text/css" href="plugins/element-ui/theme-default/index.css" />
		<style>
			.zanwu {
				width: 90%;
				height: 380px;
				text-align: center;
				line-height: 380px;
				font-size: 30px;
				margin-top: 40px;
				margin-bottom: 40px;
				color: #323232;
				border: 2px solid #DDDDDD;
				background-color: #fafafa;
			}
		</style>
		<!--[if lt IE 9]>
			<script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div id="app">
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
						<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
					</div>
					<navbars :acv="bnav"></navbars>
				</div>
			</nav>

			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-3 col-md-2 sidebar">
						<fxnav fx="4"></fxnav>
					</div>
					<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
						<h2 style="color: #0D81F5;"><b>交易汇总分析</b></h2>

<!-- 						<div class="row placeholders alert alert-info" style="padding-top: 10px;padding-bottom: 10px;">
							<h4><img src="images/sx.png" style="margin-left: -24px;margin-top: -3px;">各区县交易量汇总分析</h4>
							<button style="margin: 0 20px;" class="btn btn-primary pull-right" @click="dateChange()">确认</button>
							<form role="form" class="form-inline pull-right">
								<div class="form-group">
									<div class="form-group">
										<label for="year">年：</label>
										<select v-model="years" name="address" id="year" class="form-control">
											<option :value="yearss.years" v-for="yearss in ym">{{yearss.years}}年</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="form-group">
										<label for="mouth">月：</label>
										<select v-model="days" name="address" id="mouth" class="form-control">
											<option :value="'0'+n"  v-for="n in yearSelect(years)" >{{n}}月</option>	
										</select>
									</div>
								</div>
							</form>
						</div> -->

<!-- 						<div style="text-align:center;">
							<h3 style="width: 90%;padding: 10px 0;">各区县交易量汇总分析</h3>
							<div style="text-align: center;width: 90%;padding: 0px 0 10px;font-weight:bold;"><span>全市交易量总数：</span><span id="totalNum1">0</span></div>
							<div v-show="chart1show" id="chart1" style="width: 90%;height:580px;"></div>
							<div v-show="!(chart1show)" class="zanwu">暂无数据 </div>
						</div> -->

						<div class="row placeholders alert alert-info" style="padding-top: 10px;padding-bottom: 10px;">
							<h4><img src="images/sx.png" style="margin-left: -24px;margin-top: -3px;">各区县交易额汇总分析</h4>
							<button style="margin: 0 20px;" class="btn btn-primary pull-right" @click="dateChange2()">确认</button>
							<form role="form" class="form-inline pull-right">
								<div class="form-group">
									<div class="form-group">
										<label for="year">年：</label>
										<select v-model="years2" name="address" id="year" class="form-control">
											<option :value="yearss.years" v-for="yearss in ym">{{yearss.years}}年</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="form-group">
										<label for="mouth">月：</label>
										<select v-model="days2" name="address" id="mouth" class="form-control">
											<option :value="'0'+n"  v-for="n in yearSelect(years2)" >{{n}}月</option>		
										</select>
									</div>
								</div>
							</form>
						</div>
						<div style="text-align:center;" style="padding-bottom: 100px;">
							<h3 style="width: 90%;padding: 10px 0;">各区县交易额汇总分析</h3>
							<div style="text-align: center;width: 90%;padding: 5px 0;font-weight:bold;"><span>全市交易量总数：</span><span id="totalNum3">0</span></div>
							<div style="text-align: center;width: 90%;padding: 0px 0 10px;font-weight:bold;"><span>全市交易额总数：</span><span id="totalNum2">0</span>元</div>
							<div v-show="chart2show" id="chart2" style="width: 90%;height:580px;"></div>
							<div v-show="!(chart2show)" class="zanwu">暂无数据 </div>
						</div>

						<div style="margin-top: 50px;">
							<table v-loading.body="loading" class="table table-hover table-bordered table-responsive">
								<thead>
									<tr style="background-color: #dfe6ec;">
										<th>区县</th>
										<th>交易数量</th>
										<th>交易金额（元）</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in trainData2.addressList">
										<td>{{trainData2.addressList[index]}}</td>
										<td>{{trainData2.businessList[index]}}</td>
										<td>&yen; {{trainData2.tradingList[index]}}</td>
									</tr>
								</tbody>
							</table>
						</div>

					</div>
				</div>
			</div>
		</div>

		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<script type="text/javascript" src="js/nav.js"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					bnav: {
						number: 2,
					},
					trainData: [],
					salesArea: [],
					businessVolume: [],
					trainData2: [],
					salesArea2: [],
					businessVolume2: [],
					tradingVolume: [],
					area: [],
					category1: [],
					total111: 0,
					total222: 0,
					total333: 0,
					years: 2017,
					days: '01',
					years2: 2017,
					days2: '01',
					chart1show: true,
					chart2show: true,
					ym:[],
					loading:false

				},
				computed: {

				},
				mounted: function() {
					this.getData();
					this.getData2();
					this.yearMonth();
				},
				methods: {
					yearSelect:function(years){
						var yms = this.ym.filter(function(element){
							return element.years == years;
						})
						var yo = yms[0] || {};
						return yo.months;
					},
					yearMonth:function(){
							var dates = new Date();
							var year = dates.getFullYear();
							var month = dates.getMonth()+1;
							var childs=[];
							if(year>=2017){
								for(var i = 0;i<=(year-2017);i++){
									if(i+2017<year){
										childs.push({years:2017+i,months:12})
									}else if(i+2017==year){
											childs.push({years:2017+i,months:month})
									}
								}
							}
							this.ym = childs;
	
					},
					dateChange: function() {
						this.category1 = [];
						this.area = [];
						this.businessVolume = [];
						this.total111 = 0;
						if(this.years == "" && this.days == "") {
							this.getData();
						} else if(this.days != "" && this.years != "") {
							this.getData();
						} else {
							this.$message({
								showClose: true,
								message: "请補全年月！",
								type: 'warning'
							});
						}
					},
					dateChange2: function() {
						this.total222 = 0;
						this.total333 = 0;
						this.tradingVolume = [];
						this.businessVolume2 = [];
						if(this.years2 == "" && this.days2 == "") {
							this.getData2();
						} else if(this.days2 != "" && this.years2 != "") {
							this.getData2();
						} else {
							this.$message({
								showClose: true,
								message: "请補全年月！",
								type: 'warning'
							});
						}
					},
					getData: function(val) {
						var vm = this;
						
						$.ajax({
							type: "get",
							url: "ebb/front/product/businessVolume/?startTime=" + vm.years + "-" + vm.days,
							async: true,
							success: function(data) {
								if(data.toString().length > 4) {
									vm.trainData = data;
									vm.makeAxisData1();
								} else {
									vm.chart1show = false;
								}
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                vm.chart1show = false;
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					getData2: function(val) {
						var vm = this;
						vm.loading = true;
						$.ajax({
							type: "get",
							url: "ebb/front/product/tradingVolume/?startTime=" + vm.years2 + "-" + vm.days2,
							async: true,
							success: function(data) {
								if(data.addressList.length > 4) {
									vm.trainData2 = data;
									for(var i = 0; i < vm.trainData2.businessList.length; i++) {
										vm.total222 += parseInt(vm.trainData2.businessList[i]);
										vm.total333 += parseInt(vm.trainData2.tradingList[i]);
										vm.trainData2.tradingList[i] = (vm.trainData2.tradingList[i] + "").replace(/([0-9]+\.[0-9]{2})[0-9]*/, "$1")
									}
									$("#totalNum3").html(vm.total222);
									$("#totalNum2").html(vm.total333);
									vm.makeChart2();
									vm.loading = false;
									//										vm.makeAxisData2();
								} else {
									vm.chart2show = false;
								}
							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                vm.chart2show = false;
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }
						});
					},
					makeAxisData1: function() {
						var vm = this;
						for(var i = 0; i < vm.trainData.businessList.length; i++) {
							vm.businessVolume.push({ value: vm.trainData.businessList[i], name: vm.trainData.addressList[i] });
							vm.area.push(vm.trainData.addressList[i]);
							vm.category1.push(parseInt(vm.trainData.businessList[i]));
							vm.total111 += parseInt(vm.trainData.businessList[i]);
						}
						$("#totalNum1").html(vm.total111);
						vm.makeChart1();
					},
					makeAxisData2: function() {
						var vm = this;
						for(var i = 0; i < vm.trainData2.length; i++) {
							var saledata = vm.trainData2[i].salesArea;
							if(saledata == null) {
								vm.salesArea2.push('铜仁市其他');
							} else {
								if(saledata.length > 6) {
									var saledatas = saledata.split("，");
									vm.salesArea2.push(saledatas[0]);
								} else {
									vm.salesArea2.push(saledata);
								}
							}
							vm.businessVolume2.push(vm.trainData2[i].businessVolume);
							vm.tradingVolume.push(vm.trainData2[i].tradingVolume);
							vm.total222 += parseInt(vm.trainData2[i].businessVolume);
							vm.total333 += parseInt(vm.trainData2[i].tradingVolume);
						}
						$("#totalNum3").html(vm.total222);
						$("#totalNum2").html(vm.total333);
						vm.makeChart2();
					},
					makeChart1: function() {
						var chart1 = echarts.init(document.getElementById('chart1'));

						option = {
							tooltip: {
								trigger: 'axis'
							},
							color: ['#5793f3'],
							legend: {
								data: ['交易数量']
							},
							grid: {
								y2: 140
							},
							dataZoom: {
								show: true,
								realtime: true,
								orient: 'vertical',
								start: 0,
								end: 100
							},
							xAxis: [{
								type: 'category',
								data: this.area, // ['碧江区','大龙经济开发区','德江县','江口县','石阡县','思南县','松桃县','铜仁高新区','万山区','沿河县','印江县','玉屏县']
								axisLabel: {
									interval: 0,
									rotate: 50 //-30度角倾斜显示
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: '#dddddd',
										type: 'dashed',
										width: 1
									}
								},
								splitArea: {
									show: true,
									areaStyle: {
										color: ['rgba(144,238,144,0.05)', 'rgba(135,200,250,0.05)']
									}
								},
							}],
							yAxis: [{
								type: 'value',
								name: '交易数量',
								axisLabel: {
									formatter: '{value} 件'
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: '#dddfff',
										type: 'dotted',
										width: 1
									}
								},
								splitArea: {
									show: true,
									areaStyle: {
										color: ['rgba(205,92,92,0.05)', 'rgba(255,215,0,0.05)']
									}
								}

							}],
							series: [{
								name: '交易数量',
								type: 'bar',
								data: this.category1, //[5020,4900,4523,3600,2003,1600,5020,4900,4523,3600,2003,1600],
								barWidth: "80%"
							}]
						};

						chart1.setOption(option);

					},
					makeChart2: function() {

						var chart2 = echarts.init(document.getElementById('chart2'));

						var option2 = {
							tooltip: {
								trigger: 'axis'
							},
							color: ['#5793f3', '#ed7d31', '#675bba'],
							legend: {
								data: ['交易数量', '交易金额']
							},
							dataZoom: {
								show: true,
								realtime: true,
								orient: 'vertical',
								start: 0,
								end: 100
							},
							xAxis: [{
								type: 'category',
								data: this.trainData2.addressList,
								axisLabel: {
									interval: 0,
									rotate: 50 //-30度角倾斜显示  
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: '#dddddd',
										type: 'dashed',
										width: 1
									}
								},
								splitArea: {
									show: true,
									areaStyle: {
										color: ['rgba(144,238,144,0.05)', 'rgba(135,200,250,0.05)']
									}
								}
							}],
							yAxis: [{
									type: 'value',
									name: '交易数量',
									axisLabel: {
										formatter: '{value} '
									},
									axisLine: {
										lineStyle: {
											color: '#5793f3'
										}
									}
								},
								{
									type: 'value',
									name: '交易金额',
									axisLabel: {
										formatter: '{value} '
									},
									axisLine: {
										lineStyle: {
											color: '#5793f3'
										}
									}
								}
							],
							grid: {
								y2: 150
							},
							series: [{
									name: '交易数量',
									type: 'bar',
									data: this.trainData2.businessList
									//			            barWidth:"26%"
								},
								{
									name: '交易金额',
									type: 'line',
									yAxisIndex: 1,
									data: this.trainData2.tradingList
								}
							]
						};

						// 使用刚指定的配置项和数据显示图表。
						chart2.setOption(option2);
					}
				}
			});
		</script>
	</body>

</html>